<script setup>
</script>

<template>
    <main class="flex-1 flex flex-col overflow-hidden min-h-screen h-full">
        <section class="content-layout flex-1 flex flex-col size-full overflow-x-hidden overflow-y-auto">
            <Transition
                appear
                enter-active-class="animate__animated animate__fadeIn"
                leave-active-class="animate__animated animate__fadeOut"
                mode="out-in"
            >
                <slot/>
            </Transition>
        </section>
    </main>
</template>

<style lang="scss" scoped>
.content-layout {
    height: calc(100vh - 72px);
    background: var(--color-fill-2);
    border-radius: 8px 0 0 0;
}

/* 美化滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 6px;
    background-color: var(--color-neutral-5);
}

::-webkit-scrollbar-thumb:hover {
    width: 6px;
    background-color: var(--color-neutral-4);
}
</style>
